---
type: tutorial
title: 创建一个可重复使用的导航组件
description: |-
  教程：搭建你的 Astro 博客 -
  使用可重复组件替换在多个页面上重复出现的元素
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

现在你的 Astro 站点的多个页面上都有相同的 HTML 代码，是时候用一个可复用的 Astro 组件替换这些重复的内容！

<PreCheck>
  - 为组件创建一个新的文件夹
  - 构建一个 Astro 组件来显示导航链接
  - 用这个导航组件替换现有的 HTML 代码
</PreCheck>

## 创建 `src/components/` 文件夹

你需要在项目中创建一个新的文件夹 `src/components/` 来容纳 `.astro` 文件，它们会被用来生成 HTML 代码，但不会成为网站上的新页面。

## 创建一个导航组件

<Steps>
1. 创建一个新文件：`src/components/Navigation.astro`。

2. 将任意页面顶部的导航链接复制并粘贴到你的新文件 `Navigation.astro` 中：

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">首页</a>
    <a href="/about/">关于</a>
    <a href="/blog/">博客</a>
    ```
    :::tip
    如果你的 `.astro` 文件的 frontmatter 中没有任何内容，你可以不写代码块标记。当你需要时，再加上即可。
    :::
</Steps>

### 导入并使用 Navigation.astro

<Steps>
1. 回到 `index.astro`，在代码块中导入你的新组件：

    ```astro title="src/pages/index.astro"
    ---
    import Navigation from '../components/Navigation.astro';
    ---
    ```

2. 然后，在下方用你刚刚导入的新导航组件替换现有的导航 HTML 链接元素：

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">首页</a>
    <a href="/about/">关于</a>
    <a href="/blog/">博客</a>
    <Navigation />
    ```

3. 在浏览器中预览，它应该看起来完全相同……这就是你想要的！
</Steps>

你的站点生成了与之前完全相同的 HTML 代码。但现在，这三行代码由你的 `<Navigation />` 组件提供。

<Box icon="puzzle-piece">

## 自己试一试 - 在网站的其余页面上添加导航

使用相同的方法在你的网站的另外两个页面（`about.astro` 和 `blog.astro`）中导入并使用 `<Navigation />` 组件。

不要忘记：
- 在组件脚本的顶部，也就是代码块内添加一个导入语句。
- 用导航组件替换现有的代码。

</Box>

:::note
当你重新编写代码，但是不改变浏览器中的最终效果时，你正在进行的操作叫做**重构**。在这个单元中，你将多次进行**重构**，用组件替换页面 HTML 的各个部分。

这样可以让你快速开始使用任何工作代码，通常在项目中会复用到。然后，你可以逐步改进现有代码的设计，而不改变站点的外观。
:::

<Box icon="question-mark">

### 检验你的知识

1. 当元素在多个页面上重复出现时，你可以：
    <MultipleChoice>
      <Option>
        重新启动开发服务器
      </Option>
      <Option isCorrect>
        重构以让组件可以复用
      </Option>
      <Option>
        创建一个新页面
      </Option>
    </MultipleChoice>

2. Astro 组件是：
    <MultipleChoice>
      <Option>
        可重复使用的
      </Option>
      <Option>
        HTML 片段
      </Option>
      <Option isCorrect>
        以上两者都是！
      </Option>
    </MultipleChoice>

3. 当你……的时候 Astro 组件会自动在你的站点中创建一个新的页面：
    <MultipleChoice>
      <Option>
        引入 `<html></html>`
      </Option>
      <Option>
        重构
      </Option>
      <Option isCorrect>
        将 `.astro` 文件放在 `src/pages/` 中
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以将内容重构为可重复使用的组件。
- [ ] 我可以在 `.astro` 页面中添加一个新的组件。
</Checklist>

</Box>

### 相关资源 

- [Astro 组件概述](/zh-cn/basics/astro-components/)
- [重构](https://refactoring.com/) <Badge>外部链接</Badge>
